body { 
    display: grid;
    grid-template-areas: 
      "nav header header"
      "nav article ads"
      "nav footer footer";
    grid-template-rows: 80px 1fr 70px;  
    grid-template-columns: 20% 1fr 15%;
    grid-row-gap: 10px;
    grid-column-gap: 10px;
    height: 100vh;
    margin: 0;
    } 
    header, footer, article, nav, div {
        padding: 1.2em;
        background: gold;
        }
      #pageHeader {
        grid-area: header;
        }
      #pageFooter {
        grid-area: footer;
        }
      #mainArticle { 
        grid-area: article;      
        }
      #mainNav { 
        grid-area: nav; 
        }
      #siteAds { 
        grid-area: ads; 
        } 
      /* Stack the layout on small devices/viewports. */
      @media all and (max-width: 575px) {
        body { 
          grid-template-areas: 
            "header"
            "article"
            "ads"
            "nav"
            "footer";
          grid-template-rows: 80px 1fr 70px 1fr 70px;  
          grid-template-columns: 1fr;
       }
      }
      /* 设置一个网页最小范围值，在这个范围上不允许在缩小网页大小 */